<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="java.util.List, com.petcommunity.model.Pet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    List<Pet> pets = (List<Pet>) request.getAttribute("pets");
%>
<%
    String role = (String) session.getAttribute("role");
%>





<html>
<head>
    <meta charset="UTF-8">
    <title>宠物管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4211259_0u5hm8ka6caa.css">
    <link rel="stylesheet" href="css/management.css">
</head>
<body>
    <div class="page-container">
        <!-- 装饰性爪印 -->
        <div class="decorative-paws paw-1">🐾</div>
        <div class="decorative-paws paw-2">🐾</div>
        <div class="decorative-paws paw-3">🐾</div>
        <div class="decorative-paws paw-4">🐾</div>

        <div class="main-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="header-content">
                    <div class="header-icon">🐕</div>
                    <h2 class="page-title">宠物管理</h2>
                    <p class="page-subtitle">给毛孩子一个专属成长档案</p>
                </div>
            </div>

            <!-- 主要内容区域 -->
            <div class="content-wrapper">
                <c:if test="${role == 'admin'}">
                    <!-- 添加宠物表单 -->
                    <div class="form-section">
                        <div class="section-header">
                            <h3 class="section-title">
                                <span class="section-icon">➕</span>
                                添加新宠物
                            </h3>
                        </div>
                        <form method="post" action="pets" class="add-form">
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="name">
                                        <i class="icon-pet"></i>
                                        宠物名
                                    </label>
                                    <input type="text" id="name" name="name" placeholder="请输入宠物名字" required>
                                </div>
                                <div class="form-group">
                                    <label for="species">
                                        <i class="icon-category"></i>
                                        种类
                                    </label>
                                    <input type="text" id="species" name="species" placeholder="如：狗、猫、鸟等" required>
                                </div>
                                <div class="form-group">
                                    <label for="breed">
                                        <i class="icon-breed"></i>
                                        品种
                                    </label>
                                    <input type="text" id="breed" name="breed" placeholder="请输入具体品种" required>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="gender">
                                        <i class="icon-gender"></i>
                                        性别
                                    </label>
                                    <select id="gender" name="gender" class="select-input">
                                        <option value="公">🐕 公</option>
                                        <option value="母">🐕 母</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="birthDate">
                                        <i class="icon-calendar"></i>
                                        出生日期
                                    </label>
                                    <input type="date" id="birthDate" name="birthDate" required>
                                </div>
                                <div class="form-group">
                                    <label for="ownerId">
                                        <i class="icon-user"></i>
                                        主人ID
                                    </label>
                                    <input type="number" id="ownerId" name="ownerId" placeholder="请输入主人ID" required>
                                </div>
                            </div>
                            <div class="form-actions">
                                <button type="submit" class="submit-btn">
                                    <span class="btn-icon">🎉</span>
                                    添加宠物
                                </button>
                            </div>
                        </form>
                    </div>
                </c:if>

                <!-- 宠物列表 -->
                <div class="table-section">
                    <div class="section-header">
                        <h3 class="section-title">
                            <span class="section-icon">📋</span>
                            宠物列表
                        </h3>
                        <div class="table-info">
                            <span class="record-count">共 ${pets.size()} 只宠物</span>
                        </div>
                    </div>

                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-id"></i>
                                            ID
                                        </span>
                                    </th>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-pet"></i>
                                            名字
                                        </span>
                                    </th>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-category"></i>
                                            种类
                                        </span>
                                    </th>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-breed"></i>
                                            品种
                                        </span>
                                    </th>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-gender"></i>
                                            性别
                                        </span>
                                    </th>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-calendar"></i>
                                            出生日期
                                        </span>
                                    </th>
                                    <th>
                                        <span class="th-content">
                                            <i class="icon-user"></i>
                                            主人ID
                                        </span>
                                    </th>
                                    <c:if test="${role == 'admin'}">
                                    <th>
                                        <div class="th-content">
                                            <i class="fas fa-cogs"></i>
                                            操作
                                        </div>
                                    </th>
                                    </c:if>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach var="p" items="${pets}" varStatus="status">
                                    <tr class="table-row" data-index="${status.index}">
                                        <td class="id-cell" data-label="ID">${p.petId}</td>
                                        <td class="name-cell" data-label="名字">
                                            <div class="pet-info">
                                                <div class="pet-avatar">
                                                    <c:choose>
<%--                                                        <c:when test="${p.species == '狗' || p.species == 'dog'}">🐕</c:when>--%>
<%--                                                        <c:when test="${p.species == '猫' || p.species == 'cat'}">🐱</c:when>--%>
<%--                                                        <c:when test="${p.species == '鸟' || p.species == 'bird'}">🐦</c:when>--%>
<%--                                                        <c:when test="${p.species == '鱼' || p.species == 'fish'}">🐠</c:when>--%>
<%--                                                        <c:when test="${p.species == '兔' || p.species == 'rabbit'}">🐰</c:when>--%>
<%--                                                        <c:otherwise>🐾</c:otherwise>--%>
                                                        <c:when test="${p.species == '狗' || p.species == 'dog'}">&#x1F436;</c:when>
                                                        <c:when test="${p.species == '猫' || p.species == 'cat'}">&#x1F431;</c:when>
                                                        <c:when test="${p.species == '鸟' || p.species == 'bird'}">&#x1F426;</c:when>
                                                        <c:when test="${p.species == '鱼' || p.species == 'fish'}">&#x1F420;</c:when>
                                                        <c:when test="${p.species == '兔' || p.species == 'rabbit'}">&#x1F430;</c:when>
                                                        <c:otherwise>&#x1F43E;</c:otherwise>

                                                    </c:choose>
                                                </div>
                                                <span class="pet-name">${p.name}</span>
                                            </div>
                                        </td>
                                        <td class="species-cell" data-label="种类">
                                            <span class="species-tag">${p.species}</span>
                                        </td>
                                        <td class="breed-cell" data-label="品种">
                                            <span class="breed-text">${p.breed}</span>
                                        </td>
                                        <td class="gender-cell" data-label="性别">
                                            <span class="gender-badge ${p.gender == '公' ? 'male' : 'female'}">
                                                ${p.gender == '公' ? '♂' : '♀'} ${p.gender}
                                            </span>
                                        </td>
                                        <td class="date-cell" data-label="出生日期">
                                            <span class="birth-date">${p.birthDate}</span>
                                        </td>
                                        <td class="owner-cell" data-label="主人ID">
                                            <span class="owner-id">#${p.ownerId}</span>
                                        </td>
                                        <c:if test="${role == 'admin'}">
                                        <td data-label="操作">
                                            <div class="action-buttons">
                                                <button class="edit-btn" onclick="editPet(${p.petId})">
                                                    <i class="fas fa-edit"></i>编辑
                                                </button>
                                                <button class="delete-btn" onclick="deletePet(${p.petId})">
                                                    <i class="fas fa-trash"></i>删除
                                                </button>
                                            </div>
                                        </td>
                                    </c:if>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>

                        <c:if test="${empty pets}">
                            <div class="empty-state">
                                <div class="empty-icon">🐾</div>
                                <h3>暂无数据</h3>
                                <p>还没有添加任何宠物信息</p>
                            </div>
                        </c:if>
                    </div>
                </div>

                <!-- 返回按钮 -->
                <div class="back-section">
                    <a href="dashboard.jsp" class="back-btn">
                        <span class="btn-icon">🏠</span>
                        返回首页
                    </a>
                </div>
            </div>
        </div>
    </div>
<script>
function editPet(id) {
    if (confirm('确定要编辑该宠物信息吗？')) {
        window.location.href = 'edit?type=pet&id=' + id;
    }
}

function deletePet(id) {
    if (confirm('确定要删除该宠物信息吗？此操作不可恢复！')) {
        window.location.href = 'delete?type=pet&id=' + id;
    }
}
</script>

</body>
</html>